<template>
  <div style="width: 70%;margin: 50px auto">
    <div style="text-align: center;font-size: 22px;font-weight: bold">{{data.activityData.name}}</div>

    <div style="margin-top: 15px;display: flex;align-items: center;justify-content: center">
      <div style="margin-left: 20px;font-size: 15px">开始时间:{{data.activityData.start}}</div>
      <div style="margin-left: 20px;font-size: 15px">结束时间:{{data.activityData.end}}</div>
    </div>

    <div style="margin-top: 10px;display: flex;align-items: center;justify-content: center">
      <div style="margin-left: 20px;font-size: 15px">地点: {{data.activityData.location}}</div>
      <div style="margin-left: 20px;font-size: 15px">报名人数: {{data.activityData.num}}</div>
    </div>

    <div>
      <div v-html="data.activityData.content" style="margin-top: 50px;padding: 0 50px"></div>
    </div>

    <div style="text-align: center">
      <div v-if="data.activityData.status==='已结束'">
        <el-button @click="ending" type="info">立即报名</el-button>
      </div>
      <div v-else>
        <el-button @click="apply" type="primary">立即报名</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import router from "@/router/index.js";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const data=reactive({
  user:JSON.parse(localStorage.getItem('code_user')||"{}"),
  activityId: router.currentRoute.value.query.id,
  activityData:{}
})

const loadActivity=()=>{
  request.get(`/activity/selectById/${data.activityId}`).then(res=>{
    if(res.code==='200'){
      data.activityData=res.data
    }else {
      ElMessage.error(res.msg)
    }
  })
}
loadActivity()

const apply=()=>{
  data.activityData.num=data.activityData.num+1
request.put('/activity/update',data.activityData).then(res=>{
  if (res.code==='200'){
    ElMessage.success('报名成功')
  }else {
    ElMessage.error(res.msg)
  }
})
}

const ending=()=>{
  ElMessage.warning('活动已结束')
}
</script>